<template>
  <h1>挂号数信息</h1>
  <el-row :gutter="10">

    <el-col :span="5">
      <el-input v-model="query.RegnusData.employeeName" placeholder="请输入医生姓名" style="width: 200px;" />
    </el-col>

    <el-col :span="5">
      <el-select v-model="query.RegnusData.departmentId"
                 :clearable="true"
                 placeholder="请选择部门">
        <el-option v-for="item in departments.data"
                   :key="item.departmentId"
                   :label="item.departmentName"
                   :value="item.departmentId" />
      </el-select>
    </el-col>

    <el-col :span="8">
        <el-date-picker
          v-model="query.RegnusData.useTime"
          type="date"
          placeholder="请选择日期"
          style="width:300px;"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
    </el-col>
    <el-col :span="5">
      <el-button type="primary" @click="getRegnusData(query.RegnusData)">搜索</el-button>
    </el-col>

  </el-row>
  <el-table :data="tableData.data" style="width: 100%;margin-top: 20px">

    <el-table-column label="序号" type="index" width="80" align="center">
    </el-table-column>

    <el-table-column label="就诊医生" prop="employeeName" width="80" align="center">
    </el-table-column>

    <el-table-column label="科室" prop="departmentName" width="100" align="center">
    </el-table-column>


    <el-table-column label="上午号数" prop="amNumber" width="100" align="center">
    </el-table-column>

    <el-table-column label="下午号数" prop="pmNumber" width="100" align="center">
    </el-table-column>

    <el-table-column label="使用日期" width="130px" align="center">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <timer />
          </el-icon>
          <span style="margin-left: 10px">{{ scope.row.useTime }}</span>
        </div>
      </template>
    </el-table-column>

    <!--    <el-table-column label="价格" prop="price" width="100" align="center">-->

    <!--      <template #default="scope">-->
    <!--        <div>{{(scope.row.price/100).toFixed(2)+'元'}}</div>-->
    <!--      </template>-->
    <!--    </el-table-column>-->

    <el-table-column label="操作" width="200px" align="center">
      <template #default="scope">
        <el-button
          style="width: 60px;"
          size="small"
          @click="handleEdit(scope.row)"
        >修改
        </el-button>
        <el-button
          style="width: 60px;"
          size="small"
          type="danger"
          v-model:current-page="query.RegnusData.pages"
          v-model:age-sizes="query.RegnusData.size"
          @click="handleDelete(scope.row)"
        >删除
        </el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!--分页组件-->
  <div style=" display: flex;
  justify-content: flex-end;">
    <el-pagination
      small
      layout="total, prev, pager, next, jumper"
      :total="tableData.total"
      class="pagiantion "
      @current-change="pageChange"
      v-model:current-page="query.RegnusData.pages"
      v-model:page-size="query.RegnusData.size"
    />
  </div>
</template>

<script lang="js" setup>
import { onMounted, reactive, toRaw } from "vue";
import { getMedicine, deleteMedicine } from "@/utils/MedicineRequest";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { deleteRegistration, getRegistration } from "@/utils/RegistrationRequest";
import { Timer } from "@element-plus/icons-vue";
import { deleteRegnus, getRegnus } from "@/utils/RegnusRequest";
import { getDepartmentNameId } from "@/utils/api";

const router = useRouter();
//展示数据
const tableData = reactive({
  data: [
    {
      "regNusId": 1,
      "employeeId": 1,
      "employeeName": "张三",
      "departmentId": 1,
      "departmentName": "皮肤科",
      "amNumber": 10,
      "pmNumber": 10,
      "useTime": "2024-01-10",
      "createTime": "2024-02-22 10:06:52",
      "updateTime": "2024-02-22 10:06:52",
      "isDelete": 0
    }
  ],
  total: 0,
  current: 1, //当前页数
  size: 2  //每页显示几条数据
});


//请求参数
const query = reactive({
  RegnusData: {
    "useTime": "",
    "departmentId": "",
    "employeeName":"",
    "size": tableData.size,
    "pages": tableData.current
  }
});


//组件加载时触发
onMounted(() => {
  getRegnusData(query.RegnusData);
  getDepartmentOptionData();
});

//获取数据
const getRegnusData = async (requestData) => {
  let res = await getRegnus(requestData);
  tableData.data = res.data;
  tableData.total = res.total;
  tableData.current = res.current;
};


const departments = reactive({
  data: []
});

//分页的页码变化时触发
const pageChange = () => {
  getRegnusData(query.RegnusData);
};

const getDepartmentOptionData = async () => {
  let res = await getDepartmentNameId();
  departments.data = res.data;
};


//修改回调
const handleEdit = (row) => {
  router.push({
    path: "/home/updateregnus",
    query: { id: row.regNusId }
  });
};

//删除
const handleDelete = (row) => {
  ElMessageBox.confirm(
    "确定要删除吗?",
    "警告",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  )
    .then(async () => {
      let res = await deleteRegnus(row);
      console.log(toRaw(row));
      if (res.data) {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
      } else {
        ElMessage({
          type: "error",
          message: "删除成功"
        });
      }
      getRegnusData(query.RegnusData);

    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};

</script>

<style scoped>
</style>